<template>
  <!-- 中央欢迎词-->
  <div id="centerbg" class="main-bag" :style="figureHeight">
    <Carousel
      :autoplay="false"
      :initIndex="0"
      :direction="false"
      :duration="5000"
      directionColor="skyblue"
      :indicator="false"
    >
      <CarouselItem
        v-for="(item, index) in carouselData.data"
        :key="index"
        :idx="index"
      >
        <el-image
          :z-index="-2000"
          :src="item"
          fit="cover"
          class="animate__animated animate__fadeInRight animate__bounceOutDown"
        >
          <template #error>
            <div class="image-slot">
              <el-image
                :z-index="-2000"
                :src="randomArrayIndex(store.state.defaultErrorImageUrl)"
                fit="cover"
              >
              </el-image>
            </div>
          </template>
        </el-image>
      </CarouselItem>
    </Carousel>
    <div class="focusinfo">
      <h1
        class="center-text glitch is-glitching Ubuntu-font"
        :data-text="user.mark || 'Welcome'"
        >{{ user.mark || 'Welcome' }}
      </h1>
      <div class="header-info">
        <p
          ><i class="fa fa-quote-left"></i>
          {{ user.motto || mainInfo.motto || '知识就是力量' }}
          <i class="fa fa-quote-right"></i></p
        ><br />
        {{ user.address || mainInfo.address }}<br />
        <div class="top-social_v2">
          <li id="bg-pre" @click="changeBacImg"
            ><img alt="上一屏" class="flipx" :src="wheelImg.pre.src"
          /></li>
          <li v-for="(item, index) in social || []" :key="index">
            <a :href="item.path" target="_blank" :title="item.title">
              <img :src="item.src" />
            </a>
          </li>
          <li id="bg-next" @click="changeBacImg"
            ><img alt="下一屏" :src="wheelImg.pre.src"
          /></li>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onBeforeMount, onBeforeUnmount, reactive } from 'vue'
  import { getApikey } from '@/api/thirdParty/thirdparty'
  import { randomArrayIndex } from '@/utils/randomArrayElemt'
  import { useStore } from 'vuex'
  import { user, social } from '@/settings'

  const store = useStore()

  // const URL = ['https://api.ixiaowai.cn/api/api.php/',"https://apikey.net/?type=Wimg"]
  const URL = ['https://apikey.net/?type=Wimg', 'https://apikey.net/?type=Wimg']

  //画布高度
  const figureHeight = reactive({
    height: 'auto' //844
  })

  // 主页个人信息标题
  const mainInfo = reactive({
    // 座右铭一言
    motto: '',
    address: ''
  })

  /**
   * 初始化图片
   * @type {UnwrapNestedRefs<{data: string[]}>}
   */
  const carouselData = reactive({
    data: [
      `${URL[0]}&time=` + new Date().getTime() + Math.round(Math.random() * 50),
      URL[0]
    ]
  })

  /**
   * 背景切换
   */
  // const changeImg = setInterval(() => {
  //   getRandom({
  //     type:
  //     CONSTANT.HOME_IMAGES_RANDOM_BAC.type
  //   }).then(res => {
  //     url.value = res.data.pictureUrl
  //   }).catch(err => {
  //
  //   })
  // }, 10000)

  const changeBacImg = () => {
    // carouselData.data[0] = 'https://apikey.net/?type=Wimg&time=' + new Date().getTime() + Math.round(Math.random() * 50)
    carouselData.data[0] =
      `${URL[0]}&time=` + new Date().getTime() + Math.round(Math.random() * 50)
  }

  /**
   * 换壁纸图标
   * @type {UnwrapNestedRefs<{next: {src: string}, pre: {src: string}}>}
   */
  const wheelImg = {
    pre: {
      src: 'https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/next-b.svg'
    },
    next: {
      src: 'https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/next-b.svg'
    }
  }

  /**
   * 自动切换图片
   */
  const setTime = setInterval(() => {
    carouselData.data[0] =
      `${URL[0]}&time=` + new Date().getTime() + Math.round(Math.random() * 50)
  }, 20000)

  onBeforeMount(() => {
    // 获取视口大小,动态修改第一屏高度
    figureHeight.height = document.documentElement.clientHeight + 'px'
    getApikey().then((res) => {
      mainInfo.motto = res.data.saying
      console.log('res.data', res.data)
      mainInfo.address = `欢迎来自 : ${res.data.ipAttribution} 访客`
    })
  })

  onBeforeUnmount(() => {
    clearInterval(setTime)
  })
</script>

<style lang="less" scoped>
  .main-bag {
    position: relative;
    width: 100%;
    height: 0px;
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }

  .top-social_v2 {
    li {
      cursor: pointer;
    }
  }
</style>
